<template>
  <div class="nav-bar">
    <el-menu router :default-active="'/'" mode="horizontal" @select="handleSelect">
      <el-menu-item class="p-l-0">
        <div class="icon">
          <img width="45" :src="websiteInfo.iconUrl" alt="">
          <span>{{websiteInfo.zhName}}</span>
        </div>
      </el-menu-item>
      <el-menu-item index="/">首页</el-menu-item>
      <el-submenu index="/articleType">
        <template slot="title">文章</template>
        <el-menu-item index="/articleTypes">全部</el-menu-item>
        <el-menu-item v-for="(item, index) in articleTypeList" :key="index" :index=" '/articleType/' + item._id">
          {{item.articleTypeName}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/guestBook">留言</el-menu-item>
      <el-menu-item index="/about">关于</el-menu-item>
      <el-menu-item :index="'/searchArticles?title='+searchTitle" id="is-active">
        <div class="search">
          <input class="search-input" type="text" placeholder="搜索" v-model="searchTitle">  
          <i class="el-icon-search search-icon"></i>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>


<script>
  export default {
    components: {
    },
    data() {
      return {
        articleTypeList: [],
        websiteInfo: {},
        searchTitle: ''
      };
    },
    created() {
      this.getArticleTypes()
      this.getWebsiteInfo()
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      async getArticleTypes() {
        let res = await this.api.get('/client/getArticleTypeList')
        if (res.code == 0) this.articleTypeList = res.data
        else this.$message({message: res.message, type: 'warning', showClose: true,})
      },
      async getWebsiteInfo() {
        let res = await this.api.get('/getWebsiteInfo')
        if (res.code == 0) this.websiteInfo = res.data
        else this.$message({message: res.message, type: 'warning', showClose: true,})
      },
    }
  }
</script>

<style lang="scss">
.nav-bar {
  z-index: 999;
  position: fixed;
  left: 0;
  right: 0;
  background: #fff;
  transition: all .5s;
  border-bottom: solid 1px #e6e6e6;
  &:hover {
    box-shadow: 0 1px 8px #ccc;
  }
  .icon {
    img {
      border-radius: 50%;
    }
    span {
      color: #444444;
      margin-left: 5px;
      font-weight: 800;
    }
  }
  .el-menu.el-menu--horizontal {
    border: none;
  }
  #is-active {
    border-bottom: none;
  }
  .el-menu {
    max-width: 1100px;
    margin: 0 auto;
  }
  .search {
    .search-input {
      padding: 0 40px 0 20px;
      width: 240px;
      height: 38px;
      font-size: 14px;
      border: 1px solid #eee;
      border-radius: 40px;
      background: #eee;
      transition: width .5s;
      &:focus {
        width: 300px;
      }
    }
    .search-icon {
      position: relative;
      left: -32px;
      font-size: 22px;
      transition: color 0.5s;
      &:hover {
        color: black;
      }
    }
  }
}
</style>